<style>
  /* .CommonMain .u-bg-grey {
    background: #d5d5d5;
  } */
</style>
<div class="CommonHeader">
  <div class="CommonBackBtn">
    <a href="javascript:history.go(-1)"
      ><img src="__CDN__/map/images/return_black.png" alt="返回"
    /></a>
  </div>
  <div class="CommonTitle">添加提现账号</div>
</div>

<div class="CommonMain">
  <form
    action="{:url('user/addbankaccount')}"
    enctype="multipart/form-data"
    method="post"
    name="form"
  >
    <div class="InfosBox ">
      <div class="DrawingstDiv am-cf">
        <span class="am-fl">姓名</span>
        <input
          class="am-fl"
          type="text"
          value="{$accont.compellation}"
          name="compellation"
          placeholder="请输入您的真实姓名"
        />
      </div>
      <div class="DrawingstDiv am-cf">
        <span class="am-fl">银行卡号</span>
        <input
          class="am-fl"
          type="text"
          value="{$accont.account}"
          name="account"
          placeholder="请输入提现的账户"
        />
      </div>
      <div class="DrawingstDiv am-cf">
        <span class="am-fl">开户行</span>
        <select class="am-fl" name="banking_id">
          {$banking_array}
        </select>
        <p class="img"><img src="__CDN__/map/images/arrow_right.png" /></p>
      </div>
      <input class="am-fl" type="hidden" value="{$accont.id}" name="id" />
      <div class="DrawingstDiv am-cf">
        <span class="am-fl">支行</span>
        <input
          class="am-fl"
          type="text"
          value="{$accont.branch}"
          name="branch"
          placeholder="请输入支行名称"
        />
      </div>
      <div class="InfostDiv am-in">
        <span class="am-fl">省选择</span>
        <select id="addarea_sheng" class="am-fl" name="province" ;>
          {$option.prov}
        </select>
      </div>
      <div class="InfostDiv am-in">
        <span class="am-fl">市选择</span>

        <select
          id="addarea_shi"
          class="am-fl"
          name="city"
          style="display:none;"
        >
        </select>
      </div>
      <div class="InfostDiv am-in">
        <span class="am-fl">区选择</span>

        <select
          id="addarea_quxian"
          class="am-fl"
          name="area"
          style="display:none;"
        >
        </select>
      </div>
      <div class="DrawingstDiv am-cf">
        <span class="am-fl">手机</span>
        <input
          class="am-fl input3"
          type="text"
          id="mobile"
          value="{$accont.mobile}"
          name="mobile"
          placeholder="请输入手机号码"
        />
      </div>
      <div class="DrawingstDiv am-cf">
        <span class="am-fl">验证码</span>
        <input
          class="am-fl input2"
          type="text"
          name="code"
          placeholder="请输入验证码"
        />
        <span
          class="am-fr dmColor verificationCodeBtn u-bg-grey CodeBtn"
          id="verificationCodeBtn"
        >获取验证码</span
        >
      </div>
    </div>
    <div class="DmBtn Mt70">
      <input class="gradualBgNew" type="button" disabled="true" value="保存" />
    </div>
  </form>
</div>
<style>
  /*.DrawingstDiv span{*/
  /*width: 26%;*/
  /*}*/
  .gradualBgNew{
    background: #808695;
  }
  .CommonMain{
    overflow: hidden;
    height: 100%;
    overflow-y: auto;
  }

  .CodeBtn {
	  background: linear-gradient(228deg, #ff9c1e 0, #ff7300 100%);
  }
  .DrawingstDiv .dmColor.verificationCodeBtn {
    width: 2.8rem !important;
    cursor: pointer;
  }
  select {
    background: #fff !important;
  }
  .clearfix:after {
    content: ".";
    display: block;
    visibility: hidden;
    height: 0;
    line-height: 0;
    font-size: 0;
    clear: both;
  }
  .clearfix {
    zoom: 1;
  }
  .DrawingstDiv input {
    width: auto !important;
    text-align: left !important;
  }
  .DrawingstDiv .input2 {
    width: 40% !important;
  }
  .DrawingstDiv select {
    direction: ltr !important;
  }
  .dmColor {
    color: white !important;
    display: inline-block;
    vertical-align: middle;
    width: 30% !important;
    font-weight: 600;
  }
  .am-fl {
    font-size: 0.3rem;
    font-weight: 600;
    color: #323232;
  }

  .DrawingstDiv input {
    color: #323232;
  }
  input.am-fl::-webkit-input-placeholder {
    color: #323232;
  }
  input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #323232;
  }
  input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #323232;
  }
  input:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #323232;
  }
</style>
<script>
  // 监听验证码输入情况
  $(".input3").on("input", function() {
    let len = $(this).val().length
    if (len > 0) {
      $(".verificationCodeBtn").addClass("CodeBtn").attr('disabled',false);
    } else {
      $(".verificationCodeBtn").removeClass("CodeBtn").attr('disabled',true);
    }
  })
  $(".input2").on("input", function() {
    let len = $(this).val().length
    if (len > 0) {
      $(".gradualBgNew").addClass("CodeBtn").attr('disabled',false);
    } else {
      $(".gradualBgNew").removeClass("CodeBtn").attr('disabled',true);
      $(".gradualBgNew").addClass("gradualBgNew").attr('disabled',false);
    }
  })
  // 监听输入设置是否高亮
  $("input").on("input", function() {
    let bool = true
    $("input").each(function(i, el) {
      if (el.type === "text") {
        bool = el.value > 0 && bool
        if (bool) {
          $(".gradualBgNew").addClass("gradualBg")
        } else {
          $(".gradualBgNew").removeClass("gradualBg")
        }
      }
    })
  })

  $("#addarea_sheng").change(function() {
    var provid = $("#addarea_sheng").val()
    $.get("{:url('user/getRegion')}?pid=" + provid + "&ajax=1", function(data) {
      $("#addarea_shi").show(0, function() {
        console.info(data)
        $(this).html(data)
      })
    })
  })

  $("#addarea_shi").change(function() {
    var provid = $("#addarea_shi").val()
    $.get("{:url('user/getRegion')}?pid=" + provid + "&ajax=1", function(data) {
      $("#addarea_quxian").show(0, function() {
        $(this).html(data)
      })
    })
  })
  $(document).on("click", "#verificationCodeBtn", function() {
    var obj = $(this)
    var mobile = $("#mobile").val()
    if (mobile != "") {
      if (
        !/^((\d{3}-\d{8}|\d{4}-\d{7,8})|(1[3|5|7|8][0-9]{9}))$/.test(mobile)
      ) {
        alert("手机号填写的格式不对，请正确填写")
        return false
      } else {
        $(".verificationCodeBtn").removeClass("CodeBtn").attr('disabled',true);
        $.ajax({
          type: "GET",
          url: "{$http_url}" + "/api/sms/send?event=addback&mobile=" + mobile,
          dataType: "json",
          success: function(data) {
            if (data.code == 0) {
              alert(data.msg)
            } else {
              alert('验证码已发送成功')
              settime(obj)
              // $("input[name='code']").val(data.data);
            }
          },
          error: function(jqXHR) {
            console.log("Error: " + jqXHR.status)
          }
        })
      }
    } else if (mobile == "") {
      alert("手机号不能为空")
      return false
    }
  })
  //倒计时60秒的逻辑
  var countdown = 60
  function settime(obj) {
    //发送验证码倒计时
    if (countdown == 0) {
      obj.attr("disabled", false)
      obj.addClass("gradualBg")
      obj.text("获取验证码")
      countdown = 60
      return
    } else {
      obj.attr("disabled", true)
      obj.removeClass("gradualBg")
      obj.text("重新发送" + "(" + countdown + ")")
      countdown--
    }
    setTimeout(function() {
      settime(obj)
    }, 1000)
  }
</script>
<style>
  @media screen and (max-width: 641) {
      /* .verificationCodeBtn{} */
  }
  {if $accont.id}
  select{
      color: #323232 !important;
  }
  {/if}
</style>
<script type="text/javascript" src="__CDN__/assets/js/jquery.form.js"></script>
<script>
  $(".gradualBgNew").on("click", function() {
    $("form").ajaxSubmit(function(e) {
      if (e.code == 1) {
        alert(e.msg)
        javascript: history.go(-1)
      } else {
        alert(e.msg)
      }
    })
  })
</script>
